<style>
  .page {
    display: flex; /*设为伸缩容器*/
    flex-flow: row; /*伸缩项目单行排列*/
  }
  .sidebar {
    width: 300px;
  }

  #answers {
    flex: 1;
    margin-right: 20px;
  }
  .answer {
    margin-bottom: 20px;
    background-color: beige;
    border-bottom: 2px solid black;
  }
  img{width: 400px!important;}
</style>
<script src="getjson.js"></script>
<div class="page">
  <div id="answers">
    <div class="answer"></div>
  </div>
  <div class="sidebar">
    <h2>相关问题</h2>
    <div>
      <ul></ul>
    </div>
  </div>
</div>

<script>
  // 知乎回答的文件有4个an1-4.json
  // 相关问题 similar.json

  // getJSON('./similar.json').then((json) => console.log(json))
const promises=[...Array(4)]
.map((_,index)=>`./an${index+1}.json`)
.map(url=>getJSON(url))
Promise.all([
  getJSON('./similar.json'),
  ...promises
]).then(([similar,...ans])=>{
  // console.log(similar,ans);
  document.getElementById('answers').innerHTML=
  ans.reduce((items,an)=>{
    return [...items,...an.data]
  },[])
  .map((item)=>`<div class="answer"><h2>${item.author.name}</h2>${item.content}</div>`
  ).join('')
  console.log(similar);
  document.querySelector('.sidebar ul').innerHTML=similar.data.map(item=>`<li>${item.title}(${item.answer_count})</li>`).join('')
  })


  
</script>
